<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Super </title>
    <style>
        .input{
            margin-left: 30px;
        }
        .video-main{
            width: 40%;
            height: 500px;
            border: 1px solid gray;
            float: left;
        }
        .video-main video{
            width: 100%;
            height: inherit;
        }

        .video-box{
            width: 40%;
            height: 500px;
            float: right;
            overflow-y: auto;
            border: 1px solid gray;
        }
        .voide-child{
            float:left;
            margin-left: 30px;
            margin-top: 5px;
            width: 200px;
            height: 150px;
            border: 2px solid gray;
        }

        .video-bar{
            float: right;
            margin-right: 10px;
            height: 20px;
            width: 20px;
        }

        .tool-bar{
            clear: both;
            padding: 20px;
        }
        .voide-child video{
            height: 125px;
            width: 200px;
        }
    </style>
</head>
<body>
    
    <div class="video-main"> </div>

    <div class="video-box"> </div>

    <div class="tool-bar">
        <input type="button" value="call" onclick="call()">
        <input type="button" value="hungup" onclick="hungup()">

        <input type="button" value="accept" onclick="acceptCall()">
        <input type="button" value="reject" onclick="reject()">
        
        <input type="button" value="mute" onclick="mute()">
        <input type="button" value="unmute" onclick="unmute()">

        <input type="button" value="videoToAudio" onclick="videoToAudio()">
        <input type="button" value="audioToVideo" onclick="audioToVideo()">

    </div>

    <script src="//cdn.ronghub.com/RongIMLib-2.2.6.js"></script>
</body>

    <script src="../init.js"></script>

    <script src="../jquery-3.1.1.js"></script>
    
    <script src="./adapter.js"></script>
    <script src="./kurento-utils.js"></script>
    <script src="./kurento-jsonrpc.js"></script>
    <script src="./EventEmitter.js"></script>
    <script src="./KurentoRoom.js"></script>

    <script src="../underscore-1.8.3.js"></script>

    <script src="../rong-calllib-util.js"></script>
    <script src="./rong-calllib-webrtc.js"></script>

    <script src="../rong-calllib-sendmsg.js"></script>

    <script src="../rong-calllib.js"></script>

    <script>
       // var users = [ {
       //          userid:"1001",
       //          token:"hsYEW1+K1JHASMHGUrJJJLrkPG6U/xPk3zvPIWf9le1hEGTTL55/U3+F/iaeDmXmOvEHh5CgU1f6tiN2qQZgBQ=="
       //      }, {
       //          userid:"1002",
       //          token:"UAFlOdMThtHnc18558yPhcSkAMimzaj6nB20cRPaYWRyLGGbEPHrt12ut6s/G81HNXcegD4ILRb/EnGJdxts4Q=="
       //      }];

        var users = [ {
            userid:"xiaoqiao9901",
            token:"lkjMJKTLnHN4x2bHmpktSLywMGBz8rrOEvvIt6wnoWtS/djzTfE65mnnYm6hzGxOfWXuti0epkOS1BFuAUwiECvbaor53a5U"
        }, {
            // userid:"xiaoqiao9902",
            // userid:"52dzNbLBZ",
            userid:"AUj8X32w1",
            token:"hZ/FYFCN0MRB/zUkNoG3j8Lg1HgVe6BNpEIHZDy7fhI1VRF7zfE/Qv7aE2aMdLAzhhkwCwiGcAwLZ2dp77Kizg=="
        }];

        var userId = users[0].userid;
        var inviteUserIds = [users[1].userid];
        var token = users[0].token;

        var conversationType = 1;
        var targetId = users[1].userid;

        if(location.search.indexOf("user") > -1){
            userId = users[1].userid;
            inviteUserIds = [users[0].userid];
            token = users[1].token;
            targetId = users[0].userid;
        }

        function onInitcomplete(error, callLib){
            console.log(callLib);
        }

        var callbacks = {
            getInstance : function(instance){
               
            },
            getCurrentUser : function(userInfo){
                console.log(userInfo.userId);
            }
        };

        var params = {
            // appKey : '8luwapkvucoil',
            appKey : 'e0x9wycfx7flq',
            navi: '119.254.111.49:9100',
            token : token
        };
        
        var mediaType = RongIMLib.MediaType;

        QuickRongIM.init(params,callbacks);

/************************ WebRTC **************************************/
        // 大视频窗口
        var element = $('.video-main')[0];
        // video box
        var videoBox = $('.video-box')[0];
        var config = {
            url: 'wss://119.254.101.80:38443/room'
        };
        RongCallLib.setConfig(config);  

        var videoItem = {
            added: function(node){
                var videoEl = $('<div class="voide-child"><div class="video-bar">x</div></div>')[0];
                videoEl.appendChild(node);
                videoBox.appendChild(videoEl);
            },
            removed: function(videoElId){
                var videoEl = $('#' + videoElId)[0];
                var parentEl = videoEl.parentNode;
                videoBox.removeChild(parentEl);
            }
        };
        // 注册视频节点监听
        RongCallLib.vodeioWatch(function(result){
            videoItem[result.type](result.data);
        });

        // 注册命令监听
        RongCallLib.commandWatch(function(command){
            console.log(command);
        });


        var CallType = RongIMLib.VoIPMediaType;

        function call(){
            var params = {
                conversationType: conversationType,
                targetId: targetId,
                inviteUserIds: inviteUserIds,
                mediaType: CallType.MEDIA_VEDIO
            };
            RongCallLib.call(params, function(error){
                console.log(error);
            });
        }

        function hungup(){
            videoBox.innerHTML = '';
            var params = {
                conversationType: conversationType,
                targetId: targetId,   
            };
            RongCallLib.hungup(params, function(error, summary){
                console.log(summary);
            });
        }

        function acceptCall(){
            var params = {
                conversationType: conversationType,
                targetId: targetId,
                mediaType: CallType.MEDIA_VEDIO
            };
            RongCallLib.accept(params);
        }

        function reject(){
            RongCallLib.reject();
        }

        function join(){
            var params = {
                mediaType: CallType.MEDIA_VEDIO
            };
            RongCallLib.join(params);
        }

        function mute(){
            RongCallLib.mute();
        }

        function unmute(){
            RongCallLib.unmute();
        }

        function videoToAudio(){
            RongCallLib.videoToAudio();
        }

        function audioToVideo(){
            RongCallLib.audioToVideo();
        }

    </script>
</html> 